<!DOCTYPE HTML>
<html>
 <head>
  <title> 表单代码结构</title>
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
       <link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" />   <!-- 下面的样式，仅是为了显示代码，而不应该在项目中使用-->
   <link href="../assets/css/prettify.css" rel="stylesheet" type="text/css" />
   <style type="text/css">
    code {
      padding: 0px 4px;
      color: #d14;
      background-color: #f7f7f9;
      border: 1px solid #e1e1e8;
    }
   </style>
 </head>
 <body>
  
    
    <div class="container">
     <div class="row">
       <div class="span4">
         <h2>整体结构</h2>
         <ol>
           <li>页面声明</li>
           <li>资源文件</li>
           <li>详情页</li>
           <li>详情页分块</li>
           <li>详情行</li>
         </ol>
       </div>
       <div class="span20">
         <pre class="prettyprint linenums">
&lt;!DOCTYPE HTML&gt;
&lt;html&gt;
 &lt;head&gt;
  &lt;title&gt; 详情页&lt;/title&gt;
   &lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8" /&gt;
       &lt;link href="../assets/css/dpl-min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="../assets/css/bui-min.css" rel="stylesheet" type="text/css" /&gt;
    &lt;link href="../assets/css/page-min.css" rel="stylesheet" type="text/css" /&gt;
 &lt;/head&gt;
 &lt;body&gt;     
  &lt;div class="container"&gt;
    &lt;div class="detail-page"&gt;
      &lt;h2&gt;学生信息&lt;/h2&gt;
      &lt;div class="detail-section"&gt;  
        &lt;h3&gt;基本信息&lt;/h3&gt;
       
        &lt;div class="row detail-row"&gt;
          &lt;div class="span8"&gt;
            &lt;label&gt;班级：&lt;/label&gt;&lt;span class="detail-text"&gt;一年级一班&lt;/span&gt;
          &lt;/div&gt;
          &lt;div class="span8"&gt;
            &lt;label&gt;年龄：&lt;/label&gt;&lt;span class="detail-text"&gt;21&lt;/span&gt;
          &lt;/div&gt;
           &lt;div class="span8"&gt;
            &lt;label&gt;家庭住址：&lt;/label&gt;&lt;span class="detail-text"&gt;速度发撒旦法师打法是否撒反对撒范德萨发撒旦法倒萨发生&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row detail-row"&gt;
          ....
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="detail-section"&gt; 
        ....
      &lt;/div&gt; 
      &lt;div class="detail-section"&gt; 
        ....
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script type="text/javascript" src="../assets/js/jquery-1.8.1.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../assets/js/bui-min.js"&gt;&lt;/script&gt;

  &lt;script type="text/javascript" src="../assets/js/config-min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    BUI.use('common/page');
  &lt;/script&gt;
  
&lt;script type="text/javascript"&gt;
  //此处实现 js 代码
&lt;/script&gt;

&lt;body&gt;
&lt;/html&gt;  

         </pre>
       </div>
     </div>
     <div class="row">
       <div class="span24">
         <h2>几点说明</h2>
         <ol>
           <li>文档声明为 <code>&lt;!doctype html&gt;</code>,文件格式是utf-8</li>
           <li>css文件在 title中引入，js在页面底部引入</li>
           <li>页面引入的 prettify.js和prettify.css仅是为了展示代码使用</li>
         </ol>
       </div>
     </div>
    </div>

  <!-- 仅仅为了显示代码使用，不要在项目中引入使用-->
  <script type="text/javascript" src="../assets/js/prettify.js"></script>
  <script type="text/javascript">
    //$(function () {
      prettyPrint();
    //});
  </script>  

<body>
</html>  